<!--  -->
<script setup>
import SimpleInput from '@/components/input/SimpleInput.vue'
import PasswordInput from '@/components/input/PasswordInput.vue'
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import { useBreadsStore } from '@/stores'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  registerAPI,
  loginByMailAPI,
  loginByUsernameAPI,
  getCurrUserInfoAPI
} from '@/apis/user'
import { setToken } from '@/utils/auth'
import { useUserStore } from '@/stores'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([{ title: '登录' }])

const router = useRouter()
const userStore = useUserStore()

const loginForm = ref({
  account: 'cat',
  passwd: '123456',
})

const prompt = ref('')

function validateForm() {
  let valid = true
  if (loginForm.value.account === '') {
    prompt.value = '账号不能为空'
    valid = false
  }
  if (loginForm.value.passwd === '') {
    prompt.value = (valid ? '' : '账号及') + '密码不能为空'
    valid = false
  }
  return valid
}

async function onLogin() {
  // check
  if (!validateForm()) return
  // login
  const { account, passwd } = loginForm.value
  // 判断account是否符合邮箱格式（正则）
  const isEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(account)
  try {
    isEmail
      ? await registerAPI({ email: account, passwd })
      : await registerAPI({ username: account, passwd })
  } catch (err) {
    prompt.value = err.message
    return
  }

  prompt.value = '注册成功, 正在登录...'

  // 注册后自动登录
  const loginRes = isEmail
    ? await loginByMailAPI({ email: account, passwd }).catch(() => null)
    : await loginByUsernameAPI({ username: account, passwd }).catch(() => null)

  if (!loginRes) {
    prompt.value = '登录失败'
    return
  }

  setToken(loginRes.data)
  getCurrUserInfoAPI().then((res) => {
    userStore.setUserInfo(res.data)
  })

  setTimeout(() => router.push('/questions'), 1000)
}

</script>

<template>
  <div class="login-wrapper">
    <div class="section-header">
      <div class="section-title">CycleIForum</div>
      <div class="section-subtitle">register</div>
    </div>
    <div class="tips" style="color:red;">
    </div>
    <div class="section-content">
      <form class="form-content">
        <SimpleInput class="account-input" placeholder="用户名/邮箱" v-model="loginForm.account"></SimpleInput>
        <PasswordInput class="passwd-input" placeholder="密码" v-model="loginForm.passwd"></PasswordInput>
        <p class="prompt">{{ prompt }}</p>
      </form>
      <div class="content-footer">
        <SubmitBtn class="button" @click="onLogin" style="margin-left: auto;">注册</SubmitBtn>
      </div>
    </div>
    <div class="section-footer">
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60px;
  margin: 30px auto 40px;
  border-radius: 4px;
  background-color: var(--view-bgc-01);
  box-shadow: 0px 0px 6px rgba(54, 83, 56, 0.297);
}

.section-header {
  margin-top: 10px;
  padding: 10px 0 0;
}

.section-title {
  padding-top: 10px;
  padding-bottom: 0px;
  font-family: "Oswald", "Bookman Old Style", serif;
  font-size: 2.50rem;
  border-bottom: 1px solid var(--site-home-title);
  letter-spacing: 0.12rem;
  width: max-content;
  margin: auto;
  color: var(--site-home-title);
}

.section-subtitle {
  font-family: Roboto, inherit "Merienda", sans-serif;
  font-weight: 400;
  font-size: .75rem;
  color: var(--site-home-subtitle);
  letter-spacing: 0.100rem;
  margin: auto;
  width: max-content;
}

.section-content {
  flex: 1;
  margin: 50px 0 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .form-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .account-input,
  .passwd-input {
    width: 350px;
  }

  .prompt {
    margin-left: 2px;
    margin-top: 2px;
    color: red;
    height: 1em;
  }

  .button {
    font-size: 14px;
    width: 80px;
    line-height: 1.5;
    border-radius: 2px;
    margin-left: 0 !important;
    cursor: pointer;
  }

  .submit-btn {
    border: 1px solid var(--border-primary);
    background-color: var(--btn-bgc);

    &:active {
      background-color: var(--btn-active) !important;
    }

    &:hover {
      background-color: var(--btn-hover);
    }
  }

  .content-footer {

    display: flex;
    width: 100%;
    justify-content: space-between;

    .remember-me {
      border-bottom: 2px solid var(--border-secondary);
      padding: 10px;
    }
  }

}

.section-footer {
  margin: 20px 0 10px;
  padding: 10px 0;
  padding-top: 10px;
  text-align-last: center;
}


a {
  color: rgb(157, 63, 0);
  text-decoration: none;
  transition: color 0.3s ease-in-out;

  &:hover {
    color: rgb(0, 125, 40);
  }
}
</style>
